<script setup lang='ts'>
import { ref, watch } from 'vue';

const money = ref(500)
const age = ref(18)
const person = ref({
  name: '张三',
  age: 20
})

// 1.watch基本使用
// watch(money, (newValue, oldValue) => {
//   console.log(`新值:${newValue},旧值:${oldValue}`)
// })

//2.watch监听两个数据
// watch([money, age], (newValue, oldValue) => {
//   console.log(`新值:${newValue},旧值:${oldValue}`)
// })

//3.watch监听对象,开启深度侦听
// watch(person, (newValue) => {
//   console.log(`新值:${newValue.age}`)
// }, { deep: true })

//4.watch监听对象,immediate 进入页面就触发一次
watch(person, (newValue) => {
  console.log(`新值:${newValue.age}`)
}, { deep: true, immediate: true })



const addMoney = () => {
  money.value++
  age.value++
  person.value.age++
}
</script>

<template>
  <div>
    <div>{{ money }}</div>
    <div>{{ age }}</div>
    <button @click="addMoney">增加</button>
  </div>
</template>

<style scoped></style>